<template>
  <template v-for="item in menuList" :key="item.path">
    <!-- 没有children的菜单 -->
    <template v-if="!item.children">
      <el-menu-item v-if="!item?.meta?.hidden" :index="item.path" @click="goRoute">
        <el-icon>
          <component :is="item?.meta?.icon" />
        </el-icon>
        <template #title>
          <span>{{ item?.meta?.title }}</span>
        </template>
      </el-menu-item>
    </template>
    <template v-if="item.children">
      <!-- 只有一个子菜单 -->
      <el-menu-item
        v-if="item.children.length === 1 && !item?.children[0]?.meta?.hidden"
        :index="item.children[0].path"
        @click="goRoute"
      >
        <el-icon>
          <component :is="item?.children[0]?.meta?.icon" />
        </el-icon>
        <template #title>
          <span>{{ item?.children[0]?.meta?.title }}</span>
        </template>
      </el-menu-item>
      <!-- 有多个子菜单 -->
      <el-sub-menu v-if="item.children.length > 1 && !item?.meta?.hidden" :index="item.path">
        <template #title>
          <el-icon>
            <component :is="item?.meta?.icon" />
          </el-icon>
          <span>{{ item?.meta?.title }}</span>
        </template>
        <div style="padding-left: 10px">
          <Menu :menu-fold="false" :menuList="item.children"></Menu>
        </div>
      </el-sub-menu>
    </template>
  </template>
</template>

<script lang="ts" setup>
import { defineProps, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
defineProps(['menuList', 'menuFold'])
const $route = useRoute()
const $router = useRouter()
const goRoute = (vc) => {
  $router.push(vc.index)
}
</script>

<script lang="ts">
export default {
  name: 'Menu',
}
</script>

<style lang="scss" scoped>
.el-menu {
  border-right: none;
}
</style>
